<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>商品维护</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="css/comments.css" media="all">
    <style>
        .layui-form-label{
            width: 120px;
        }
        .layui-input-block{
            margin-left: 150px;
        }
        #my_iframe{
            width: 100%;
            border: 0;
            height: 100%;
            display: none;
        }
        td[data-field="sortNumber"]{
            padding: 0!important;
        }
        td[data-field="sortNumber"] .layui-table-cell{
            height: unset;
            line-height: 38px;
            padding: 0;
        }
        td[data-field="sortNumber"] input{
            border: 1px solid #f58843;
            box-shadow: 1px 1px 20px rgba(0, 0, 0, .15);
            background: #ffffff;
            min-height: 34px;
            line-height: 34px;
            width: 100%;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <div class="maincontainer">
        <div class="layui-card">
            <div class="layui-card-header layuiadmin-card-header-auto">
                <form id="queryForm" class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">商品名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="productName" autocomplete="off" class="layui-input" placeholder="商品名称" maxlength="20">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">商品类别</label>
                            <div class="layui-input-inline">
                                <!-- <select name="categoryId" lay-search>
                                    <option value=""></option>
                                </select>  -->
                                <input type="text" name="categoryId" autocomplete="off" id="tree" lay-filter="tree" class="layui-input">
                                <!-- <input type="text" name="productCategoryName" autocomplete="off" class="layui-input" placeholder="商品类别" maxlength="20"> -->
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">审核状态</label>
                            <div class="layui-input-inline">
                                <select name="reviewStatus" lay-filter="reviewStatus">
                                    <option value=""></option>
                                    <option value="0">待审核</option>
                                    <option value="1">审核通过</option>
                                    <option value="2">审核不通过</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">检测报告是否过期</label>
                            <div class="layui-input-inline">
                                <select name="annexExpiredStatus" lay-filter="annexExpiredStatus">
                                    <option value=""></option>
                                    <option value="1">已过期</option>
                                    <option value="0">未过期</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">商品状态</label>
                            <div class="layui-input-inline">
                                <select name="shelfStatus" lay-filter="shelfStatus">
                                    <option value=""></option>
                                    <option value="1">上架</option>
                                    <option value="0">下架</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn"  lay-submit lay-filter="searchBth">查询</button>
                            <button type="reset" class="layui-btn layui-btn-primary reReset" onclick="javascript:onReset()">重置</button>
                            <!-- 请上传excel表格, 后缀名为.xls, .xlsx的都可以 -->
                            <input type="file" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" id="fileUpLoad" multiple style="display: none;" name="">
                            <label type="button" class="layui-btn layui-btn-primary" for="fileUpLoad" style="margin-left: 10px;">导入</label>
                            <a style="font-size:13px;" class="buttoncolor downModule">下载导入模板</a>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-card-body">
                <table class="layui-hide" id="selectTable" lay-filter="selectTable"></table>
            </div>
        </div>

    </div>
    <!-- <iframe id="my_iframe" src="productManagementAdd.html" ></iframe> -->
</body>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container toolbarDemo">
		<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
		<button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="export">导出</button>
	</div>
</script>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    layui.config({
        base: 'plugins/layui/modules/',
    }).use(['http', 'table', 'form', 'treeSelect'], function() {
        var http = layui.http,
            table = layui.table,
            form = layui.form,
            treeSelect = layui.treeSelect;
        var excelList,currPage,limit

        // 重置
        window.onReset = function() {
            treeSelect.revokeNode('tree', function(d){});
        }
		
        http.checking(function() {

            $('.reReset').click();
            var search = sessionStorage.getItem('xi-can-supplier-productMSearch')
            if(search){
                search = JSON.parse(search)
                currPage = search.page
                limit = search.limit
                
                $('select[name=reviewStatus]').val(search.reviewStatus)
                $('select[name=annexExpiredStatus]').val(search.annexExpiredStatus)
                $('select[name=shelfStatus]').val(search.shelfStatus)
                $('input[name=productName]').val(search.productName)
            }

            // 分类查询
            getCategory()
            function getCategory() {
                // http.get('supplier/admin/product/category/listAllCategory',{},function(res){
                //     if(res.code == 200){
                //         var html = '<option value="">请选择商品类别</option>';
                //         var data = res.data;
                        // for (var i = 0; i < data.length; i++) {
                        //     html += '<option value="' + data[i].id + '">' + data[i].categoryName + '</option>'
                        // }
                        // $('select[name=categoryId]').html(html);
                        // form.render('select');
                        var authentication = localStorage.getItem('xi-can-supplier-authentication')
                        treeSelect.render({
                            // 选择器
                            elem: '#tree',
                            // 数据
                            data: TUrl + 'supplier/admin/product/category/listAll',
                            // 异步加载方式：get/post，默认get
                            type: 'get',
                            headers: {
                                authentication: authentication
                            },
                            // 占位符
                            placeholder: '商品类别',
                            // 是否开启搜索功能：true/false，默认false
                            search: true,
                            style: {
                                folder: {
                                    enable: false
                                },
                                line: {
                                    enable: true
                                }
                            },
                            // 点击回调
                            click: function(d){
                                // categoryId = d.current.id
                                // $('input[name=categoryId]').val(d.current.id)
                            },
                            // 加载完成后的回调函数
                            success: function (d) {
                                // // console.log(d);
                                if(search){
                                    if(search.categoryId)
                                        treeSelect.checkNode('tree', search.categoryId);
                                    // $('input[name=categoryId]').val(search.categoryId)
                                }
                                
                            }
                        });
                    // }else{
                    //     layer.msg(res.msg)
                    // }
                // })
            }


            var selectTable;
            selectTable = http.table({
                elem: '#selectTable',
                url: 'supplier/admin/product/listPage',
                method: 'get',
                id: 'selectTable',
                toolbar: '#toolbarDemo',
                where: {
                    reviewStatus:  $('select[name=reviewStatus]').val(),
                    annexExpiredStatus: $('select[name=annexExpiredStatus]').val(),
                    shelfStatus: $('select[name=shelfStatus]').val(),
                    productName: $('input[name=productName]').val(),
                    categoryId: $('input[name=categoryId]').val()||(search?search.categoryId:''),
                },
                page: {
                    curr: currPage,
                    limit: limit
                },
                done: function(res, curr, count){
                    // // console.log(selectTable)
                    excelList = res.data;
                    currPage = curr
                    limit = selectTable.config.limit
                    getSearchVal() // 存储搜索条件  
                },
                cols: [[
                    {title:'序号',type:'numbers',fixed: 'left'}
                    ,{field:'mainImage', title: '商品图片', align : 'center',event: 'imgclick',
                        templet: function (d) {
                            return '<div ><img src="'+TUrl+d.mainImage+'" alt="" width="50px" height="30px"></div>'
                        }
                    }
                    ,{field:'productName', title: '商品名称', align : 'center',width: 170,
                        templet: function(d){
                            var html = ''
                            html += '<a class="buttoncolor" lay-event="detail">'+d.productName+'</a>'
                            return html
                        }
                    }
                    ,{field:'categoryName', title: '商品类别', align : 'center',width: 120,}
                    ,{field:'unitName', title: '单位', align : 'center'}
                    ,{field:'priceRange', title: '价格', align : 'center'}
                    ,{field:'sortNumber', title: '排序', align : 'center',
                        templet: function(d){
                            return '<input name="sortNumber" type="text" oninput="onkeyFun(this)" value="'+(d.sortNumber===null?'':d.sortNumber)+'" onblur="onBlurFun(this)" data-id="'+d.productId+'"/>'
                        }
                    }
                    ,{field:'shelfStatus', title: '商品状态', align : 'center',
                        templet: function (d) {
                            return d.shelfStatus==1?'上架':'下架';
                        }
                    }
                    ,{field:'reviewStatus', title: '审核状态', align : 'center',
                        templet: function (d) {
						    return d.reviewStatus==0?'<span style="color:#0066FF">待审核</span>':(d.reviewStatus==1?'<span style="color:#000000">审核通过</span>':'<span style="color: #FF0000">审核不通过</span>');
                        }
                    }
                    ,{field:'reportDueTime', title: '检测报告到期时间', align : 'center',width: 170,
                        templet: function (d) {
                            return d.reportDueTime?d.reportDueTime.split(' ')[0]:'';
                        }
                    }
                    ,{field:'', title: '操作', align : 'center',fixed: 'right',width: 180,
                        templet: function (d) {
                            var html = '';
                            if(d.shelfStatus==0){
                                if(d.reviewStatus == 1){
                                    html += '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="up" >上架</button>'
                                }
                                html += '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="modify" >修改</button>'
                                html += '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del" >删除</button>'

                            }else if(d.shelfStatus==1){
                                html += '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="down" >下架</button>'
                                html += '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="modify" >修改</button>'

                            }
                            return html;
                        }
                    }
                ]]
            });

            //查询
            form.on('submit(searchBth)', function (data) {
                let _data = data.field,
                    param = _data;
                selectTable.reload({
                    page:{curr:1},
                    where: param
                })
                return false;
            })

            
            // 整数
            window.onkeyFun = function(e) {
                if(e.value === ''){
                    return
                }
                var patt1=new RegExp("^(-?)\\d+$");
                var inputStr = e.value;
                if(!patt1.test(inputStr)){
                    layer.msg('只能输入整数')
                    e.value = "";
                }
                if(e.value.length>6){
                    e.value = e.value.slice(0,6)
                }
            }
            window.onBlurFun = function(e) {
                var productId = $(e).attr('data-id')
                var index = $(e).parent().parent().parent().index()
                if(e.value === ''){
                    $('input[name=sortNumber]').eq(index).val(excelList[index].sortNumber)
                    return
                }
                if(isNaN(e.value)){
                    $('input[name=sortNumber]').eq(index).val(excelList[index].sortNumber)
                    return
                }
                if(excelList[index].sortNumber == e.value){
                    return
                }
                http.post('supplier/admin/product/updateSortNumber',{
                    id: productId,
                    sortNumber: Number(e.value)
                },function(res){
                    if(res.code == 200){
                        layer.msg('操作成功')
                        table.reload('selectTable');
                    }else{
                        layer.msg(res.msg)
                    }
                })
            }
            table.on('tool(selectTable)', function(obj){
                var data = obj.data;
                if(obj.event=='modify'){
                    // 修改
                    location.href = 'productManagementAdd.html?id=' + data.productId
                    // $('#my_iframe').attr('src', 'productManagementAdd.html?id=' + data.productId)
                    // $('.maincontainer').hide()
                    // $('#my_iframe').show()
                }else if(obj.event=='del'){
                    // 删除
                    http.myOpen({
                        title:'提示',
                        content:'<p style="text-align:center;margin-top:20px">确认要删除该商品吗？</p>',
                        area:['300px','150px'],
                        btn:['确定','取消'],
                        btn1:function(index, layero){
                            http.post('supplier/admin/product/delete',{
                                productId: data.productId
                            },function(res){
                                if(res.code == 200){
                                    layer.msg('操作成功')
                                    layer.close(index)
                                    table.reload('selectTable');
                                }else{
                                    layer.msg(res.msg)
                                }
                            })
                            
                        }
                    });
                }else if(obj.event=='down'){
                    // 下架
                    http.myOpen({
                        title:'提示',
                        content:'<p style="text-align:center;margin-top:20px">确认要下架该商品吗？</p>',
                        area:['300px','150px'],
                        btn:['确定','取消'],
                        btn1:function(index, layero){
                            http.post('supplier/admin/product/shelf/down',{
                                productId: data.productId
                            },function(res){
                                if(res.code == 200){
                                    layer.msg('操作成功')
                                    layer.close(index)
                                    table.reload('selectTable');
                                }else{
                                    layer.msg(res.msg)
                                }
                            })
                            
                        }
                    });
                }else if(obj.event=='up'){
                    // 上架
                    http.myOpen({
                        title:'提示',
                        content:'<p style="text-align:center;margin-top:20px">确认要上架该商品吗？</p>',
                        area:['300px','150px'],
                        btn:['确定','取消'],
                        btn1:function(index, layero){
                            http.post('supplier/admin/product/shelf/up',{
                                productId: data.productId
                            },function(res){
                                if(res.code == 200){
                                    layer.msg('操作成功')
                                    layer.close(index)
                                    table.reload('selectTable');
                                }else{
                                    layer.msg(res.msg)
                                }
                            })
                            
                        }
                    });
                }else if(obj.event == 'imgclick'){
                    http.photos('<div style="text-align:center;width:450px;height:450px;overflow:hidden;"><img src="' + TUrl+data.mainImage + '" style="width:100%;height:100%;object-fit: contain"/></div>')
                }else if(obj.event == 'detail'){
                    location.href="productManagementDetail.html?id="+data.productId
                    // $('#my_iframe').attr('src', 'productManagementDetail.html?id=' + data.productId + '&type=1')
                    // $('.maincontainer').hide()
                    // $('#my_iframe').show()
                }
            })

            table.on('toolbar(selectTable)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
                var data = checkStatus.data; //获取选中行数据
                if(obj.event=='add'){ 
                    // 添加
                    location.href = "productManagementAdd.html"
                    // $('#my_iframe').attr('src', 'productManagementAdd.html')
                    // $('.maincontainer').hide()
                    // $('#my_iframe').show()
                }else if(obj.event=='export'){ // 导出
                    var data = excelList; 
                    if (data.length == 0) {
                        layer.msg('当前页没有可导出的数据');
                        return;
                    }
                    var param = {
                        page: currPage,
                        limit: limit,
                        authentication: localStorage.getItem('xi-can-supplier-authentication'),
                        reviewStatus:  $('select[name=reviewStatus]').val(),
                        annexExpiredStatus: $('select[name=annexExpiredStatus]').val(),
                        shelfStatus: $('select[name=shelfStatus]').val(),
                        productName: $('input[name=productName]').val(),
                        categoryId: $('input[name=categoryId]').val()
                        
                    }
                    if (param) {  
                        let paramsArray = [];  
                        //encodeURIComponent  
                        Object.keys(param).forEach(key => paramsArray.push(key + '=' + param[key]))  
                        window.open(TUrl+"supplier/admin/product/export?"+paramsArray.join('&'))
                    }
                }
            })

            // 获取查询数据
            function getSearchVal() {
                var val = {
                    page: currPage,
                    limit: limit,
                    reviewStatus:  $('select[name=reviewStatus]').val(),
                    annexExpiredStatus: $('select[name=annexExpiredStatus]').val(),
                    shelfStatus: $('select[name=shelfStatus]').val(),
                    productName: $('input[name=productName]').val(),
                    categoryId: $('input[name=categoryId]').val()
                }
                sessionStorage.setItem('xi-can-supplier-productMSearch', JSON.stringify(val))
            }
            
            // 导入
            $('#fileUpLoad').on('change', function () {
                var _this = this
                var file = this.files
                var formData = new FormData();
                formData.append('file', file[0]);
                http.upLoad('supplier/admin/product/importProduct',formData,function(res){
                    _this.value = ''
                    if(res.code == 200){
                        layer.msg('操作成功')
                        table.reload('selectTable');
                    }else{
                        layer.msg(res.msg)
                    }
                })
            })

            // 下载导入模板
            $('.downModule').click(function(){
                window.open(TUrl+"file/%E4%BA%A7%E5%93%81%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx")
            })
        })

    })


</script>
</html>